<template>
  <view class="component">
    <view class="title">
      <view class="label">客户评价 <text style="font-size: 26rpx;">({{ dataSource.length || 0 }})</text></view>
      <view class="more">
        <uni-icons type="forward" size="18"></uni-icons>
      </view>
    </view>
    <view class="content">
      <view class="evaluation">
        <view class="evaluation-item" v-for="(item, index) of dataSource" :key="index">
          <view class="avatar">
            <image :src="item.avatar" mode="aspectFill"></image>
          </view>
          <view class="info">
            <view class="info-header">
              <view class="name">{{ item.username }}</view>
              <view class="time">{{ item.createtime }}</view>
            </view>
            <view class="info-content">
              <view class="desc">
                {{ item.content }}
              </view>
              <!-- <view class="pictures">
                <image src="../../../static/images/ysmDesignerShop/picture-1.png" mode="aspectFill"></image>
                <image src="../../../static/images/ysmDesignerShop/picture-1.png" mode="aspectFill"></image>
                <image src="../../../static/images/ysmDesignerShop/picture-1.png" mode="aspectFill"></image>
                <image src="../../../static/images/ysmDesignerShop/picture-1.png" mode="aspectFill"></image>
                <image src="../../../static/images/ysmDesignerShop/picture-1.png" mode="aspectFill"></image>
              </view> -->
            </view>
          </view>
        </view>
      </view>

      <StEmpty v-if="isEmpty">暂无客户评价</StEmpty>
    </view>
  </view>
</template>
<script>
import StEmpty from '@/components/st-empty/st-empty.vue';
export default {
  components: {
    StEmpty,
  },
  props: {
    dataSource: {
      type: Array,
      default: () => []
    },
    isEmpty: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },
  methods: {

  }
};
</script>
<style lang='less' scoped>
.component {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    height: 90rpx;

    .label {
      font-size: 32rpx;
      color: #333;
      font-size: 15px;
      line-height: 18px;
    }

    .more {
      font-size: 28rpx;
      color: #999;
    }
  }

  .content {
    padding: 0 32rpx 30rpx;
  }
}

.evaluation {
  .evaluation-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30rpx;

    image {
      width: 100%;
      height: 100%;
    }

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 32rpx;
    }

    .info {
      width: calc(100% - 152rpx);

      .info-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 90rpx;

        .name {
          font-size: 32rpx;
          color: #333;
          font-weight: 600;
        }

        .time {
          font-size: 24rpx;
          color: #808080;
        }
      }

      .info-content {
        .desc {
          font-size: 24rpx;
          color: #808080;
          line-height: 34rpx;
          margin-top: 20rpx;
        }

        .pictures {
          margin-top: 32rpx;
          display: grid;
          grid-template-columns: repeat(3, 172rpx);
          grid-gap: 8rpx;

          image {
            width: 172rpx;
            height: 172rpx;
          }
        }
      }
    }
  }
}</style>